<template>
    <div >
        <div class="facilitator_base">
        <viewTitle :title="'基本信息'" :border="true"> </viewTitle>
        <div class="base_h">
            <!-- 可遍历的服务商基础信息字段 -->
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>服务商名称:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.facilitator_name}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入服务商名称" ref="facilitator_name"  v-model="detail.facilitator_name"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>统一信用代码:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.facilitator_code}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入统一信用代码" ref="facilitator_code"  v-model="detail.facilitator_code"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>法人姓名:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.legal_person}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入法人姓名" ref="legal_person"  v-model="detail.legal_person"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>证件号码:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.certificate}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入证件号码" ref="certificate"  v-model="detail.certificate"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>联系人姓名:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.contact_name}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入联系人姓名" ref="contact_name" v-model="detail.contact_name"></el-input>
                    </div>
                </div>
            </div>
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>联系人手机:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.contact_mobile}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入联系人手机" ref="contact_mobile" v-model="detail.contact_mobile"></el-input>
                    </div>
                </div>
            </div>
            <!--
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>服务商签名:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.label}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入服务商签名" ref="label" v-model="detail.label"></el-input>
                    </div>
                </div>
            </div>
            -->
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>单位地址:
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.address}} </div>
                    <div v-else>
                        <el-input type="text" clearable placeholder="请输入单位地址" ref="address" v-model="detail.address"></el-input>
                    </div>
                </div>
            </div>

            <!-- 所属地区： 省市区 -->
            <div class="base_h_detail">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>所属地区 :
                </div>
                <div class="base_h_detail_input">
                    <div v-if="type === 0"> {{detail.belong_address}} </div>        <!-- 对于查看服务商详情时，这里的所属地区，直接采用字符串的方式 -->
                    <div v-else>        <!-- 选择省市区 -->
                        <el-select name="provice" class="selectClass"  @change="changeRegion($event, 'provice')" v-model="detail.province" placeholder="省" ref="province">
                            <el-option  :value="item.region_id" :label="item.name" v-for="(item, index) in province_list" :key="index" :selected="item.region_id == detail.province"  >{{item.name}}</el-option>
                        </el-select>
                        <el-select name="city" class="selectClass" @change="changeRegion($event, 'city')" v-model="detail.city" placeholder="市" ref="city">
                            <el-option :value="item.region_id" :label="item.name"  v-for="(item, index) in city_list" :key="index" :selected="item.region_id == detail.city" >{{item.name}}</el-option>
                        </el-select>
                        <el-select name="district" class="selectClass" v-model="detail.district"  placeholder="区/县" ref="district">                 
                            <el-option :value="item.region_id" :label="item.name"  v-for="(item, index) in district_list" :key="index" :selected="item.region_id == detail.district" >{{item.name}}</el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            
            <!-- 管理员用户名 -->
            <div class="base_h_detail"  v-if="this.type == 1">
                <div class="base_h_detail_title">
                    <span v-if="type > 0">*</span>管理员用户名 :
                </div>
                <div class="base_h_detail_input">
                    <el-input type="text" clearable  placeholder="请输入管理员用户名" ref="facilitator_user_name" v-model="detail.facilitator_user_name"></el-input>
                </div>
            </div>
        </div>
        <div class="base_h">
            <!-- 协议附件 -->
            <div class="base_h_detail base_upload">
                <div class="base_h_detail_title base_upload_title">
                    <span  v-if="type > 0">*</span>协议附件：
                </div>
                <div class="base_h_detail_input base_upload_file">
                    <el-upload
                        ref="protocol_attach"
                        v-if="type > 0"
                        class="upload"
                        drag
                        :action="upload_file" 
                        :show-file-list="false"
                        :on-success="ProtocolAttachSuccess"
                    >
                    <img v-if="detail.protocol_attach" style="width:100%;height:100%" :src="detail.protocol_attach" alt="">
                    <i v-if="!detail.protocol_attach" class="el-icon-upload"></i>
                    <div v-if="!detail.protocol_attach" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <el-image
                        v-else
                        style="width: 100%; height: 100%"
                        :src="detail.protocol_attach"
                        :preview-src-list="[detail.protocol_attach]"
                    >
                    </el-image>
                </div>
            </div>
            <!-- 营业执照 -->
            <div class="base_h_detail base_upload">
                <div class="base_h_detail_title base_upload_title">
                    <span  v-if="type > 0">*</span>营业执照：
                </div>
                <div class="base_h_detail_input base_upload_file">
                    <el-upload
                        ref="business_licence_img"
                        v-if="type > 0"
                        class="upload"
                        drag
                        :action="upload_file" 
                        :show-file-list="false"
                        :on-success="BusinessLicenceImgSuccess"
                    >
                    <img v-if="detail.business_licence_img" style="width:100%;height:100%" :src="detail.business_licence_img" alt="">
                    <i v-if="!detail.business_licence_img" class="el-icon-upload"></i>
                    <div v-if="!detail.business_licence_img" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <el-image
                        v-else
                        style="width: 100%; height: 100%"
                        :src="detail.business_licence_img"
                        :preview-src-list="[detail.business_licence_img]"
                    >
                    </el-image>
                </div>
            </div>
            <!-- 电子印章 -->
            <div class="base_h_detail base_upload">
                <div class="base_h_detail_title base_upload_title">
                    <span  v-if="type > 0">*</span>电子印章：
                </div>
                <div class="base_h_detail_input base_upload_file">
                    <el-upload
                        ref="electron_print"
                        v-if="type > 0"
                        class="upload"
                        drag
                        :action="upload_file" 
                        :show-file-list="false"
                        :on-success="ElectronPrintSuccess"
                    >
                    <img v-if="detail.electron_print" style="width:100%;height:100%" :src="detail.electron_print" alt="">
                    <i v-if="!detail.electron_print" class="el-icon-upload"></i>
                    <div v-if="!detail.electron_print" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <el-image
                        v-else
                        style="width: 100%; height: 100%"
                        :src="detail.electron_print"
                        :preview-src-list="[detail.electron_print]"
                    >
                    </el-image>
                </div>
            </div>
              <!-- 身份证 -->
            <div class="base_h_detail base_upload">
                <div class="base_h_detail_title base_upload_title">
                    <span  v-if="type > 0">*</span>身份证照片：
                </div>
                <div class="base_h_detail_input base_upload_file">
                    <el-upload
                        ref="cert_img"
                        v-if="type > 0"
                        class="upload"
                        drag
                        :action="upload_file" 
                        :show-file-list="false"
                        :on-success="CertImgSuccess"
                    >
                        <img v-if="detail.cert_img" style="width:100%;height:100%" :src="detail.cert_img" alt="">
                        <i v-if="!detail.cert_img" class="el-icon-upload"></i>
                        <div v-if="!detail.cert_img" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    <el-image
                        v-else
                        style="width: 100%; height: 100%"
                        :src="detail.cert_img"
                        :preview-src-list="[detail.cert_img]"
                    >
                    </el-image>
                </div>
            </div>
        </div>
        
        <!-- 新增、编辑的时候还有下面的按钮，用于提交数据 -->
        <!-- 新增 -->
        <el-row style="margin-left:30px;padding-bottom:20px;">
            <el-button type="primary" @click="submitInfo" v-if="type == 1">下一步</el-button>
            <!-- 编辑 -->
            <el-button type="primary" @click="submitInfo" v-if="type == 2">保存</el-button>
        </el-row>
    </div>


    </div>
    
</template>





<script>
export default {
    name:"FacilitatorBase",
    props:{
        type:{              //编辑类型：0：查看、1：新增、2：编辑
            type: Number,
            default: 0
        }
    },
    data(){
        return{
            facilitator_id:0,   //服务商ID
            province_list: [],
            city_list: [],
            district_list : [],
            detail:{            //基本信息资料
                facilitator_name : '',      //服务商名称
                facilitator_code : '',      //企业统一编号
                legal_person  :   '',       //法人
                certificate   : '',         //身份证
                contact_name  :   '',       //联系人
                contact_mobile  :   '',     //联系电话
                // label  :   '',              //服务商签名
                address  : '',              //联系地址
                belong_address  :   '',     //所属地区（这个是查看服务商时，父组件传过来的参数）
                province  :   '',         //所属省ID
                city  :   '',             //所属市ID
                district  :   '',          //所属区ID
                facilitator_user_name: '',       //管理员用户名（主要用于新增服务商时）
                protocol_attach: '',            //协议附件
                business_licence_img: '',       //营业执照
                electron_print: '',         //电子印章
                cert_img: ''               //身份证照片
            },
            current_path: '',               //当前路由
        }
    },
    activated(){
        console.log('进入 base active', this.current_path);
        let flag = false;
        for(let val of this.getNavList){
            if(val.path == this.current_path){
                flag = true;
            }
        }
        if(!flag){
            this.$setRouteTitle();
            //如果facilitator_id 有值，并且 type = 0 或 2，则去获取服务商基本信息数据
            if(this.type != 1)   this.getFacilitatorBaseInfo();
        }
        
    },
    deactivated(){
        let flag = false;
        for(let val of this.getNavList){
            if(val.path == this.current_path){
                flag = true;
            }
        }
        if(!flag){
            this.detail={
                facilitator_name : '',      //服务商名称
                facilitator_code : '',      //企业统一编号
                legal_person  :   '',       //法人
                certificate   : '',         //身份证
                contact_name  :   '',       //联系人
                contact_mobile  :   '',     //联系电话
                // label  :   '',              //服务商签名
                address  : '',              //联系地址
                belong_address  :   '',     //所属地区（这个是查看服务商时，父组件传过来的参数）
                province  :   '',         //所属省ID
                city  :   '',             //所属市ID
                district  :   '',          //所属区ID
                facilitator_user_name: '',       //管理员用户名（主要用于新增服务商时）
                protocol_attach: '',            //协议附件
                business_licence_img: '',       //营业执照
                electron_print: '',         //电子印章
                cert_img: ''               //身份证照片
            }
        }

    },

    mounted() {
            //如果url中有 facilitator_id 服务商ID参数，则需要获取，因为这里需要该子组件获取服务商基本信息
            if(parseInt(this.$route.query.facilitator_id) > 0)      this.facilitator_id = parseInt(this.$route.query.facilitator_id);
            //如果facilitator_id 有值，并且 type = 0 或 2，则去获取服务商基本信息数据
            if(this.type != 1)   this.getFacilitatorBaseInfo();
            
            //获取对应下级的地区地址：针对 新增 服务商时，需要三级联动获取地区信息
            if(this.type == 1)       this.getRegionList();

            this.current_path = this.$route.path;
    },
    computed:{
        upload_file(){
            return  this.$store.state.uploadimg;
        },
        getNavList(){
            return  this.$store.state.showNavList;
        }

    },
    watch:{
        
    },
    methods:{
        getFacilitatorBaseInfo(){
            this.$raxios.post(this.$mapapi.facilitatorDetail,{data:{facilitator_id:this.facilitator_id}}).then(res => {
                if(res.code != 200)     return  Promise.reject(res.msg);
                // console.log('typeof',typeof res.data);
                //1、获取服务商基本信息
                this.detail = res.data;
            }).then(res => {
                //2、获取服务商所属区域数据
                this.getRegionList();
            }).catch(res => {
                this.$message.error(res);
            });
        },
        getRegionList(){            //获取省、市、区县 地区列表数据
            this.$raxios.post(this.$store.state.mapapi.get_region, {data:{parent_id: 0}}).then(res => {
                        if(res.code != 200){
                            return  Promise.reject(res.msg);
                        }   
                        //省
                        this.province_list = res.data;
                        if(parseInt(this.detail.province) > 0){
                            return  parseInt(this.detail.province);
                        }      
                        return Promise.reject(500);
                }).then(res => {
                    //市
                    this.$raxios.post(this.$store.state.mapapi.get_region, {data:{parent_id: res}}).then(res => {
                        if(res.code != 200)    return  Promise.reject(res.msg);
                        this.city_list = res.data;
                        return  parseInt(this.detail.city);
                    }).then(res => {
                        // 区/县
                        this.$raxios.post(this.$store.state.mapapi.get_region, {data:{parent_id: res}}).then(res => {
                            if(res.code != 200)    return  Promise.reject(res.msg);
                            this.district_list = res.data;
                        })
                    })
                }).catch(rej => {
                    if(rej == 500){
                        console.log('只是新增服务商');
                        return;
                    }
                    this.$message.error(rej);
                });
        },
        changeRegion(e, do_name){        //选择地区
            let parent_id = e
            //获取对应下级的地区地址
            this.$raxios.post(this.$store.state.mapapi.get_region, {data:{parent_id}}).then(res => {
                    if(res.code != 200)    return  Promise.reject(res.msg);
                    if(do_name == 'provice'){
                        this.detail.city = '';
                        this.city_list = res.data
                    }else{
                        this.detail.district = '';
                        this.district_list = res.data;
                    }
                }
            ).catch(rej => {
                this.$message.error(rej);
            });
        },
        ProtocolAttachSuccess(response){        //协议附件图片上传成功之后
            if(response.code != 200){
                this.$message.error(response.msg);
                return;
            }
            this.detail.protocol_attach = response.data.url;
        },
         BusinessLicenceImgSuccess(response){        //营业执照图片上传成功之后
            if(response.code != 200){
                this.$message.error(response.msg);
                return;
            }
            this.detail.business_licence_img = response.data.url;
        },
         ElectronPrintSuccess(response){        //电子印章图片上传成功之后
            if(response.code != 200){
                this.$message.error(response.msg);
                return;
            }
            this.detail.electron_print = response.data.url;
        },
         CertImgSuccess(response){        //身份证图片上传成功之后
            if(response.code != 200){
                this.$message.error(response.msg);
                return;
            }
            this.detail.cert_img = response.data.url;
        },
        submitInfo(){
            delete this.detail.belong_address;
            let post_data = this.detail;
                post_data.certificate  =this.$toU(post_data.certificate)
            if(this.type > 0 && parseInt(this.facilitator_id) > 0)   post_data.facilitator_id = this.facilitator_id;
            if(this.type == 1 && this.detail.facilitator_user_name == ''){
                this.$message.error('请输入管理员账号');
                return;
            }
            delete this.detail.label;
            //检查其他参数是否填写
            for(let i in this.detail){
                if(this.detail[i] == ''){
                    this.$message.error('请将对应信息填写完成');
                    this.$refs[i].focus();
                    return;
                }
            }
            this.$raxios.post(this.$mapapi.saveFacilitator, {data: post_data}).then(res => {
                if(res.code != 200){
                    return  Promise.reject(res.msg);
                }
                this.$message.success(res.msg);
                //如果市新增服务商的话，这里还需要将服务商ID往父组件传
                if(this.type == 1){
                    this.$emit('submitBaseInfo', res.data.facilitator_id);
                }else {
                    let that = this;
                    setTimeout(function() {
                        that.$blackRoute({ path: '/facilitator_list',query:{},that:this});                 // 返回指定路由-删除标题栏
                    }, 500);
                }

            }).catch(res => {
                this.$message.error(res);
            });
        }
    }
}
</script>
<style lang="less" :scope="true" src="@/style/facilitator/facilitator_list/facilitator_base.less">

</style>